<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .login-content{
            width: 360px;
            margin: 0 auto;
            border: 1px solid #999;
            border-radius: 6px;
            text-align: center;
        }
        .item{
            margin-top: 40px;
            position: relative;
        }
        .item label{
            display: inline-block;
            width: 68px;
            text-align: right;
        }
        .item input{
            border-bottom: 1px solid #999;
            border-top: 1px solid transparent;
            border-right: 1px solid transparent;
            border-left: 1px solid transparent;
            outline: none;
            font-size: 16px;
            color: #333;
        }
        .btn{
            width: 100px;
            height: 40px;
            background-color: #56a5f1;
            border-radius: 6px;
            border: none;
            outline: none;
            color: #fff;
            cursor: pointer;
            margin-bottom: 50px;
        }
        .error{
            color: tomato;
            position: absolute;
            bottom: -21px;
            left: 120px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="login-content">
            <h1>欢迎注册</h1>
            <div class="item"> 
                <label>手机号:</label>
                <input type="text" v-model="phone" v-on:blur="checkPhone" autofocus>
                <span class="error">{{phoneErr}}</span>
            </div>
            <div class="item"> 
                <label>输入密码:</label>
                <input type="password" v-model="pwd" v-on:blur="checkPwd">
                <span class="error">{{pwdErr}}</span>
            </div>
            <div class="item"> 
                <label>确认密码:</label>
                <input type="password" v-model="pwd1" v-on:blur="checkPwd1">
                <span class="error">{{pwd1Err}}</span>
            </div>
            <div class="item"> 
                <button class="btn" v-on:click="register">注册</button>
            </div>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm=new Vue({
            el: '#app',
            data:{
                phone:'',
                pwd:'',
                pwd1:'',
                phoneErr: ' ',
                pwdErr: ' ',
                pwd1Err: ' ',
            },
            methods: {
                register(){
                    if(this.phoneErr == '' && this.pwdErr == '' && this.pwd1Err == ''){
                        let userInfo={
                            phone: this.phone,
                            pwd: this.pwd
                        }
                        let userArr = []
                        // 根据localStorage的值，给userArr赋值，保证它是数组
                        if(localStorage.getItem('userInfo')){
                            userArr=JSON.parse(localStorage.getItem('userInfo'));
                        }else{
                            userArr= []
                        }
                        userArr.push(userInfo);
                        localStorage.setItem('userInfo',JSON.stringify(userArr));
                        location.href = './0321login.html'
                    }
                },
                //检查手机号
                checkPhone(){
                    if(!(/^1\d{10}$/.test(this.phone))){
                        this.phoneErr= '手机号格式有误！'
                    }else{
                        this.phoneErr= ''
                        // 检查手机号是否已被注册，需要后端支持，以JQ为例
                        // $.ajax({
                        //    url: 'xxxxx',
                        //    type: 'POST',
                        //    data:{
                        //        phone: 'xxxxx',
                        //        xxxx:xxxx
                        //    },
                        //    success:function(){
                        //        xxx
                        //    }
                        // })
                    }
                },
                //检查密码
                checkPwd(){
                    if(this.pwd == ''){
                        this.pwdErr= '请输入密码！'
                    }else if(this.pwd.length<6){
                        this.pwdErr= '密码格式有误！'
                    }else {
                        this.pwdErr= ''
                    }
                },
                //再次检查密码
                checkPwd1(){
                    if(this.pwd1 && this.pwd1 == this.pwd){
                        this.pwd1Err= ''
                    }else{
                        this.pwd1Err= '请确保两次输入一致'
                    }
                }
            },
        })
    </script>
</body>
</html>